<%@include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript"
	src="${supr}/plugins/gallery/lazy-load/jquery.lazyload.min.js"></script>
<script type="text/javascript"
	src="${supr}/plugins/gallery/jpages/jPages.min.js"></script>
<script type="text/javascript"
	src="${supr}/plugins/files/plupload/plupload.js"></script>
<script type="text/javascript"
	src="${supr}/plugins/files/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script type="text/javascript"
	src="${supr}/plugins/files/plupload/plupload.html4.js"></script>
<script type="text/javascript"
	src="${supr}/plugins/files/plupload/plupload.html5.js"></script>


<!-- Plugin stylesheets -->

<link href="${supr}/plugins/gallery/jpages/jPages.css" rel="stylesheet"
	type="text/css" />
<link href="${supr}/plugins/gallery/pretty-photo/prettyPhoto.css"
	type="text/css" rel="stylesheet" />
<link
	href="${supr}/plugins/files/plupload/jquery.ui.plupload/css/jquery.ui.plupload.css"
	type="text/css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
	//hide the action buttons
	$('.actionBtn').hide();
	//show action buttons on hover image
	$('.galleryView>li').hover(
		function () {
		   $(this).find('.actionBtn').stop(true, true).show();
		},
		function () {
		    $(this).find('.actionBtn').stop(true, true).hide();
		}
	);
	
	$('.galleryView>li').draggable({ revert: 'invalid' });
	
	 $( ".galleryView>li" ).droppable({
		  accept: '.galleryView>li',
	      drop: function( event, ui ) {
	    	  
	    	  $(ui.helper).insertAfter(this);
	    	  
	    	  var ids  = [];	
	    	  $(".galleryView>li").each(function(){
	    		  ids.push($(this).attr("gid"));
	    		  
	    	  });
	    	  makeRange(ids);
	    	  setTimeout(function(){
	    		  
	    		  
	    		  
	    		  $( ".galleryView>li" ).removeAttr("style");
	    	  }, 100);	    	  
		    }
	    });
	
	
	
 	$('.actionBtn>.delete').click(function(){
 		var image =	$(this).closest('li');
 	 
 		var id = $(this).attr("gid");
 	 	
		$.ajax({
			url : "${ctx}/admin/album-photo/"+id+"/delete/",
			type : "DELETE",
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
					johnny.info("delete picture  successfully");
					image.remove();
 				    $("div.holder").jPages("destroy").jPages({
				        containerID : "itemContainer",
				        animation   : "fadeInUp",
				        perPage		: 16,
				        scrollBrowse   : true, //use scroll to change pages
				        keyBrowse   : true,
				        callback    : function( pages ,items ){
				            /* lazy load current images */
				            items.showing.find("img").trigger("turnPage");
				            /* lazy load next page images */
				            items.oncoming.find("img").trigger("turnPage");
				        }
				    });
				}}
					
 	});});
	
	$('.actionBtn>.edit').click(function(){
		var id = $(this).attr("gid");
		makeCover(id);
		
	
		
 	});
	
	
	function makeCover(id){
		$.ajax({
			url : "${ctx}/admin/album/${albumId}/cover/",
			type : "PUT",
			data : {'photoId' : id},
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
					johnny.info("update conver successfully");
					}
			}
		});
		
		
		
		
	}
	
	function makeRange(list){
		$.ajax({
			url : "${ctx}/admin/album-photo/edit/",
			type : "POST",
			data : {'ids' : list,
			},
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
					johnny.info("update conver successfully");
					}
			}
		});
		
		
		
		
	}
	function reload(){
	    $("div.holder").jPages({
	        containerID : "itemContainer",
	        animation   : "fadeInUp",
	        perPage		: 16,
	        scrollBrowse   : true, //use scroll to change pages
	        keyBrowse   : true,
	        callback    : function( pages ,items ){
	            /* lazy load current images */
	            items.showing.find("img").trigger("turnPage");
	            /* lazy load next page images */
	            items.oncoming.find("img").trigger("turnPage");
	        }
	    });
		
		
	}

    /* initiate lazyload defining a custom event to trigger image loading  */
    $("ul#itemContainer li img").lazyload({
        event : "turnPage",
        effect : "fadeIn"
    });
    /* initiate plugin */
	reload();
  var uploader=  $("#html4_uploader").pluploadQueue({
		// General settings
		runtimes : 'html5,html4', 
		url : '${ctx}/admin/album/${albumId}/upload/',
		max_file_size : '10mb',
		max_file_count: 15, // user can add no more then 15 files at a time
		chunk_size : '1mb',
		unique_names : true,
		multiple_queues : true,

		// Resize images on clientside if we can
		resize : {width : 640, height : 480, quality : 100},
		
		// Rename files by clicking on their titles
		rename: true,
		
		// Sort files
		sortable: true,
	  init : {

			FileUploaded: function(up, file,res) {
		     if( up.total.uploaded  == up.files.length)
	            {
		    	 location.reload();
	            }
        }
		},
		filters : [
			{title : "Image files", extensions : "jpg,gif,png"},
			{title : "Zip files", extensions : "zip,avi"}
		]
	});
	
 
});


</script>
<div class="row-fluid">
	<div class="span12">
		<div class="page-header">
			<h4>Gallery</h4>
		</div>

		<!-- item container -->
		<ul id="itemContainer" class="galleryView">
			<c:set var="allEntity" value="${requestScope.photos}" />
			<c:if test="${allEntity!=null}">
				<c:forEach var="entity" items="${allEntity}">
					<li gid="${entity.id}"><a href="${entity.path}"
						rel="prettyPhoto" title="Title for image"> <img
							src="${supr}/images/gallery/preload.png"
							data-original="${entity.visitThumb}" alt="Image name">
					</a>
						<div class="actionBtn">
							<a href="#" class="edit" gid="${entity.id}"><span
								class="icon16 typ-icon-pencil white"></span></a> <a href="#"
								class="delete" gid="${entity.id}"><span
								class="icon16 icomoon-icon-file-remove white"></span></a>
						</div></li>
				</c:forEach>
			</c:if>



		</ul>

		<!-- navigation holder -->
		<div class="center">
			<div class="holder"></div>
		</div>
	</div>
</div>
<!-- End .span6 -->
<div class="row-fluid">

	<div class="span12">

		<div class="box gradient">
			<div class="title">
				<h4>
					<span class="icon16 icomoon-icon-folder"></span> <span>File
						manager and upload</span>
				</h4>
			</div>
			<div class="content noPad">
				<div id="elfinder"></div>
			</div>

		</div>
		<!-- End .box -->

	</div>
	<!-- End .span12 -->

</div>
<!-- End .row-fluid -->

<div class="row-fluid">

	<div class="span12">

		<div class="box gradient">
			<div class="title">
				<h4>
					<span class="icon16 icomoon-icon-upload"></span> <span>Upload
						manager</span>
				</h4>
			</div>
			<div class="content noPad">
				<div id="html4_uploader" style="width: 100%; height: 100%;">You
					browser doesn't have HTML 4,5 support.</div>
			</div>

		</div>
		<!-- End .box -->

	</div>
	<!-- End .span12 -->

</div>
<!-- End .row-fluid -->